<template>
	<!--拍品列表-->
	<div id="Auction">
		<div class="product-list">
			<div class="tabWrap">
				<tab class="isFixed" :line-width="2" active-color='#a30000' custom-bar-width="36px">
					<tab-item class="vux-center" v-for="item in tablist" :selected="item.name === '拍卖中'" @on-item-click="getAuctionList(item.type)" :key="item.type">{{item.name}}</tab-item>
				</tab>
			</div>
			<div v-if="status.code == 0">
				<div class="no-data">
					<img src="../assets/images/home/nodata.png" />
				</div>
			</div>
			<div class="contentWrap" v-else>
				<div class="list">
					<div class="item" v-for="(item,index) in shopList" :key="index">
						<router-link :to="'/Detail/id/' + item.auction_id">
							<div>
								<span v-if="item.bidding_count == 0 && item.auction_endtime < cur_time" class="pass">已流拍</span>
								<div class="img">
									<img :src="'/los/uploads/thumb/goods/' + item.goods_id + '_344X416.jpeg'" />
								</div>
								<div class="info">
									<p class="name"><span v-if="item.auction_deposit == 0">免保</span>{{item.goods_name}}</p>
									<p class="price"><span>￥{{item.auction_bidprice}}</span></p>
									<p class="like">
										<i class="pm-icon icon-eye"></i>
										<span> {{item.auction_vcount}}</span>
									</p>
								</div>
							</div>
						</router-link>
					</div>
				</div>
			</div>
			<toast v-model="success" type="text" width="2.8rem">{{msg}}</toast>
			<bottom></bottom>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import CountDown from 'vue2-countdown';
	import bottom from './comp/Footer';
	import { Tab, TabItem, Toast } from 'vux'
	import axios from 'axios';
	export default {
		data() {
			return {
				tabBarFixed: false,
				over: false,
				cache: true,
				shopList: [],
				globals: 2,
				category_id: 0,
				urls: '',
				status: '',
				success: false,
				msg: '',
				cur_time: '',
				tablist: [{
						name: '上新',
						type: '4'
					},
					{
						name: '拍卖中',
						type: '2'
					},
					{
						name: '预展中',
						type: '1'
					},
				],
			}
		},
		components: {
			Tab,
			TabItem,
			CountDown,
			bottom,
			Toast
		},
		created() {
			this.getAuctionList(2);
		},
		beforeRouteLeave(to, from, next) {
			if(to.name == 'Detail') {
				from.meta.keepAlive = true;
			} else {
				from.meta.keepAlive = false;
			}
			next();
		},
		methods: {
			//获取带状态拍卖信息
			getAuctionList: function(index) {
				this.category_id = this.$route.params.category_id;
				this.urls = '/los/api/index/auction_list.json?ts=' + index;
				//				if(this.category_id > 0) {
				//					this.urls += '&category_id=' + this.category_id;
				//				}
				this.globals = index;
				let _this = this;
				let more = true;
				let page = 1;
				this.$http({
					method: 'GET',
					url: this.urls,
					data: '',
				}).then((result) => {
					this.cache = false;
					this.status = result.data;
					this.shopList = result.data.data;
					this.cur_time = result.data.cur_time;
					this.$nextTick(() => {
						this.cache = true;
					});
				}).catch((err) => {
					console.log(err);
				})
				$(window).scroll(function() {
					//获取网页的总高度
					var htmlHeight = $(document).height();
					//浏览器中的可视高度
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							if(_this.globals == index) {
								axios.get(_this.urls + '&page=' + page).then(function(result) {
									$.each(result.data.data, function(index, val) {
										_this.shopList.push(val);
									});
									more = true;
									if(result.data.code == 0) {
										more = false;
									}
								}).catch(function(error) {
									console.log(error);
								});
							} else {
								return
							}

						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.no-data {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto 0;
	}

	.no-data img {
		width: 100%;
	}

	.isFixed {
		position: fixed;
		z-index: 999;
		width: 100%;
		top: 0;
	}
	/*列表项*/

	.product-list {
		width: 100%;
		overflow: hidden;
		padding-bottom: 2rem;
	}

	.product-list .list {
		width: 100%;
		padding: 0.26rem;
		margin-top: 1.17rem;
		overflow-y: auto;
	}

	.product-list .list .item {
		position: relative;
		float: left;
		margin-bottom: 0.24rem;
		width: 4.61rem;
		margin-right: 0.24rem;
	}

	.product-list .list .item:nth-child(2n) {
		margin-right: 0;
	}

	.product-list .list .item .img {
		position: relative;
		font-size: 0;
	}

	.product-list .list .item .img img {
		width: 100%;
		height: 5.57rem;
		border-top-left-radius: 0.1rem;
		border-top-right-radius: 0.1rem;
	}

	.product-list .list .item .img .time {
		width: 100%;
		height: 0.66666rem;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0 0.26666rem;
		font-size: 0.26666rem;
		color: #fff;
		line-height: 0.72rem;
		background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.5));
	}

	.product-list .list .item .pass {
		position: absolute;
		z-index: 10;
		right: 0;
		background: #aaa;
		color: #fff;
		width: 1.41rem;
		height: 0.53rem;
		font-size: 0.32rem;
		margin-left: 0.26rem;
		display: inline-block;
		line-height: 0.53rem;
		text-align: center;
		border-bottom-left-radius: 0.1rem;
		border-bottom-right-radius: 0.1rem;
	}

	.product-list .list .item .info {
		padding: 0.32rem 0.21333rem 0.34666rem;
		/*border: solid 1px #e6e6e6;*/
		/*border-top: none;*/
		background: #fff;
		height: 1.81rem;
		border-bottom-left-radius: 0.1rem;
		border-bottom-right-radius: 0.1rem;
	}

	.product-list .list .item .info .name {
		font-size: 0.34rem;
		color: #333;
		margin-bottom: 0.26rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.product-list .list .item .info .name span {
		float: left;
		background: #e93d5e;
		color: #fff;
		font-size: 0.29rem;
		padding: 0.01rem 0.1rem;
		border-radius: 0.02rem;
		margin-right: 0.05rem;
		/*display: inline-block;*/
	}

	.product-list .list .item .info .price {
		color: #aaa;
		font-size: 0.29333rem;
		float: left;
	}

	.product-list .list .item .info .like {
		float: right;
		overflow: hidden;
	}

	.product-list .list .item .info .like img {
		/*float: right;*/
		width: 0.36rem;
		height: 0.36rem;
		margin-left: 0.13rem;
		margin-top: 0.13rem;
	}

	.product-list .list .item .info .like span {
		font-size: 0.34rem;
		color: #aaa;
	}

	.product-list .list .item .info .price span {
		color: #dd2828;
		font-size: 0.4rem;
	}

	.product-list .list .item .icon-auction {
		position: absolute;
		top: 0;
		left: 0.3rem;
		padding: 0.05rem 0.1rem;
		color: #fff;
		font-size: 0.32rem;
		background-color: #db4342;
		border-bottom-left-radius: 0.05333rem;
		border-bottom-right-radius: 0.05333rem;
	}
</style>
